<template>
  <div style="padding: 10px">
    <div>
<!--      <input style="border: none;padding: 0 20px" type="text" placeholder="请输入userID"  @keyup.enter="handleInput" v-model="userId"/>-->
      <el-input v-model="userId" placeholder="请输入userID" @keyup.enter="handleInput"/>
    </div>
    <div class="list-item" v-for="(item, index) in list" :key="index" @dblclick="handleCurrentConversation(item)">
      <img
          class="avatar"
          :src="item?.avatar || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
          onerror="this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
      />
      <span class="name">{{ item?.nick || item?.userID }}</span>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
import {
  TUIConversationService,
  TUIUserService
} from "@tencentcloud/chat-uikit-engine";
const CustomSearch = defineComponent({
  name: 'CustomSearch',
  setup(props: any, ctx: any) {

    const data = reactive({
      list: [],
      userId: '',
    });

    const handleInput = async () => {
      TUIUserService.getUserProfile({ userIDList: [data.userId] })
          .then(res=>{
            data.list = res.data;
            if(1==data.list.length){
              handleCurrentConversation(data.list[0])
            }
          })
          .catch(error=>{
            console.log("搜索用户失败:"+JSON.stringify(error))
          });
    };

    const handleCurrentConversation = (item: any) => {
      let conversationId = `C2C${item.userID}`
      TUIConversationService.switchConversation(conversationId)
          .then(() => {
            console.warn("搜索打开会话成功");
            data.list = [];
            data.userId = "";
          })
          .catch((err: any) => {
            console.log("打开会话失败", err.code, err.msg);
          });
    };

    return {
      ...toRefs(data),
      handleInput,
      handleCurrentConversation
    }
  }
});
export default CustomSearch;
</script>

<style lang="scss" scoped>
  .input-bg{
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    height: 40px;
    border: 1px solid #EEEEEE;
    border-radius: 50px;
    margin-top: 10px;
  }

  .list-item{
    display: flex;
    flex-display: row;
    align-items: center;
    margin: 10px;

    .avatar{
      width: 50px;
      height: 50px;
      border-radius: 30px;
    }
    .name{
      font-size: 15px;
      font-weight: bold;
      color: #222222;
      margin-left: 10px;
    }
  }


</style>
